<template>
  <div class="app-container">
    <el-button type="primary" style="margin-bottom:20px"  @click="goback">返回</el-button>

    <el-form :model="detail" ref="form" label-width="120px">
      <el-form-item label="模块名称">
        <el-input v-model="detail.ModuleName"></el-input>
      </el-form-item>
       <el-form-item label="排序">
        <el-input v-model="detail.Sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="primary" @click="CreateAction">创建功能</el-button>
      </el-form-item>
      <el-form-item label="功能清单">
        <el-table :data="detail.ActionList" style="width: 561px" border fit highlight-current-row>
          <el-table-column align="center" label='操作' width="80">
            <template slot-scope="scope">
            <a href='javascript:;' @click="delchild(scope.$index)" style="margin-right:5px;">删除</a>
            </template>
          </el-table-column>
          <el-table-column label="功能名" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.Name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="Api地址" width="250">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ApiAddress"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="排序" width="80">
            <template slot-scope="scope">
              <el-input v-model="scope.row.Sort"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getDetail, edit, create } from '@/api/module'
import { setToken } from '@/utils/auth'
export default {
  data() {
    return {
      detail: {
        ID: '',
        FId: this.$route.query.fid,
        ModuleName: '',
        Sort: '',
        ActionList: []
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    goback(){
      this.$router.go(-1);
    },
    delchild(index) {
      this.detail.ActionList.splice(index, 1)
    },
    CreateAction() {
      this.detail.ActionList.push({
        ID: '',
        Name: '',
        Sort: '',
        ApiAddress: ''
      })
    },
    loadData() {
      if (this.$route.query.id != null) {
        getDetail(this.$route.query.id).then(response => {
          this.detail = response.Entity
          if (response.Entity == null) {
            this.$message.error('获取模块信息失败,请重试!');
            var fid = this.$route.query.fid === null ? null : this.$route.query.fid
            this.$router.push({ name: 'Module', query: { fid: fid }})
          }
        })
      }
    },
    onSubmit() {
      if (this.$route.query.id != null) {
        // edit(this.detail).then(response => {
        //   if (response.StatusCode === 0) {
        //     if (response.Entity != null) {
        //       setToken(response.Entity)
        //     }
        //     alert('编辑模块信息成功!')
        //     this.$router.push({ name: 'Module' })
        //   } else {
        //     alert(response.Message)
        //   }
        // })
        this.$http.Post(sessionStorage.setList,{input:this.detail}).then(res=>{
          if (res.StatusCode === 0) {
            if (res.Entity != null) {
              setToken(res.Entity)
            }
            this.$message({
              message: '编辑模块信息成功!',
              type: 'success'
            });
            this.$router.push({ name: 'Module' })
          } else {
            this.$message({
              message: res.Message,
              type: 'success'
            });
          }
        })
      } else {
        // create(this.detail).then(response => {
        //   if (response.StatusCode === 0) {
        //     this.$message({
        //       message: '模块创建成功!',
        //       type: 'success'
        //     });
        //     this.$router.push({ name: 'Module' })
        //   } else {
        //     this.$message({
        //       message: response.Message,
        //       type: 'success'
        //     });
        //   }
        // })
        this.$http.Post(sessionStorage.createList,{input:this.detail}).then(res=>{
          if (res.StatusCode === 0) {
            this.$message({
              message: '模块创建成功!',
              type: 'success'
            });
            this.$router.push({ name: 'Module' })
          } else {
            this.$message({
              message: res.Message,
              type: 'success'
            });
          }
        })
      }
    }
  }
}

</script>